<template>
  <div>
    <el-container>
      <el-container>
        <el-header>
          <div style="font-size: 	20px"> 蜗牛办公系统请假条</div>
        </el-header>
        <el-main>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-light" style="font-size: 20px"></div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-light" style="font-size: 20px"></div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="2">
              <div class="grid-content bg-purple-light" style="font-size: 20px"></div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-light" style="font-size: 20px">请 假 人：</div>
            </el-col>

            <el-col :span="3">
              <div class="grid-content bg-purple-light" style="height: 20px">
                <el-input type="text" v-model="name" placeholder="请假人姓名" maxlength="8"></el-input>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-light" style="font-size: 20px">部门：</div>
            </el-col>
            <el-col :span="3">
              <div class="block">
                <el-cascader
                  v-model="value"
                  @change="handleChange"></el-cascader>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-light" style="font-size: 20px"></div>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="2">
              <div class="grid-content bg-purple-light" style="font-size: 20px"></div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-light" style="font-size: 20px">请假时间：</div>
            </el-col>

            <el-col :span="5">
              <div class="block">
                <el-date-picker
                  v-model="time"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-light" style="font-size: 20px"></div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="2">
              <div class="grid-content bg-purple-light" style="font-size: 20px"></div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-light" style="font-size: 20px">请假事由：</div>
            </el-col>
            <el-col :span="9">
              <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入内容"
                v-model="cause">
              </el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-light" style="font-size: 20px">
                <div class="field">
                  <button class="button bg-main icon-check-square-o" @click="submit">
                    提交
                  </button>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-main>
        <el-footer>版本编号@20191227</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: "EmpMessage",

    data() {
      return {
        value: '',
        time: '',
        name: '',
        deptId: '',
        cause: ''
      }
    },
    methods: {
      submit() {
        axios({
          url: this.apiUrl + "/application/add",
          method: "post",
          data: JSON.stringify({
            "empId": sessionStorage.getItem("empid"),
            "title": this.name,
            "reason": this.cause,
            "leaveTime": this.time[0],
            "returnTime": this.time[1],
          }),
          headers: {"Content-Type": "application/json"}
        }).then(function (r) {
          console.log(r)
          this.$router.push({path:'/leave_list'});
        });
      },
      handleChange() {

      },
      // add(category) {
      //   this.categories.push(category);
      // },
      // del(index) {
      //   this.categories.splice(index, 1)
      // }
      getEmp() {
        axios.get("http://localhost:8000/emp/getEmp").then(r => {
          console.log(r.data.data.name)
          this.emp = r.data.data;
        })
      }

    },
    mounted() {
      this.getEmp();
    }
  }
</script>

<style scoped>
  .el-header, .el-footer {
    background-color: #CED2BA;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #E4F8ED;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }


  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
